import React from 'react';
import styled from 'styled-components';

const TalksContainer = styled.div`
	justify-content: space-around;
	display: inherit;
	margin: 2rem 0;
	width: 100%;
`;

const TalksPhoto = styled.img`
	border: 2px solid #3EC211;
	max-width: 300px;
	max-width: 300px;
`;

const TalksContent = styled.div`
	font-family: 'Open Sans', sans-serif;
	font-weight: 800;
	text-align: inherit;
`;

const TalksTitle = styled.h3`
	font-size: 36px;
	margin: 1rem 0 0.5rem;
	color: #3EC211;
`;

const TalksSubtitle = styled.h4`
	margin: 0;
	font-size: 24px;
	color:#51BBC8;
`;

const TalksParagraph = styled.p`
	font-size: 18px;
	margin: 0;
	color: #c4c4c4;
`;

export const Talks = (props) => {
	return (
		<TalksContainer>
			<TalksPhoto src={ require(`../images/${ props.src }`) } alt={ props.alt } />
			<TalksContent>
				<TalksTitle>"{ props.title }"</TalksTitle>
				<TalksSubtitle>Por { props.subtitle }</TalksSubtitle>
				<TalksParagraph>{ props.paragraph }</TalksParagraph>
			</TalksContent>
		</TalksContainer>
	);
}